import React from 'react';
import { Form, Select, Row, Col, Button, Input } from 'antd';
import PropTypes from 'prop-types';
import SalaryRefTable from '@/components/SalaryRefTable';
import { countryDict } from '@/models/mineList';
import { hideSalaryTable } from '@/utils/utils';
import styles from '../index.less';
import salary from './SalaryAdjust';
import { useSalaryincrecords } from './utils';

const { Item } = Form;
const { Option } = Select;

// 当年初始薪资基数*上浮百分比+当前薪资
const getMoney = (type, per, base, month) => {
    if (type === '0') return month;
    if (!base) return '';
    return (month + base * window.parseFloat(per) * 0.01 * (type === '1' ? 1 : -1)).toFixed(0);
};

// HR确认申请
const HR = ({ form, type, detail, user, isSuccess }) => {
    const { getFieldDecorator } = form;
    const { companyId } = user;
    const findCompany = countryDict.find(company => company.id === companyId);
    const { unit } = findCompany;
    const { salaryAdjTypeHr, salaryAdjPerHr, baseMonthSalary, employeeId, monthSalary = 0 } = detail;
    const {
        records: { incPer }
    } = useSalaryincrecords(employeeId);
    const getValue = () => {
        const hrType = form.getFieldValue('salaryAdjTypeHr');
        const hrPer = form.getFieldValue('salaryAdjPerHr');
        if (!hrType || !hrPer) return `${unit} ${monthSalary || ''}/月，即${(monthSalary * 16).toFixed(0)}/年`;
        const computedMonthSalary = getMoney(hrType, hrPer, baseMonthSalary, monthSalary);
        const computedYearSalary = (computedMonthSalary * 16).toFixed(0);
        return `${unit} ${computedMonthSalary}/月，即${computedYearSalary}/年`;
    };
    const getAdjustLabel = () => {
        const adjustType = salary.types.find(item => item.value === salaryAdjTypeHr);
        if (!adjustType) return '';
        if (adjustType.value === '0') return `${adjustType.name}`;
        // 没有薪资时不显示
        if (!baseMonthSalary) return `${adjustType.name} ${salaryAdjPerHr ? `${salaryAdjPerHr}%` : ''}`;
        const computedMonthSalary = getMoney(salaryAdjTypeHr, salaryAdjPerHr, baseMonthSalary, monthSalary);
        const computedYearSalary = (computedMonthSalary * 16).toFixed(0);
        return `${adjustType.name} ${salaryAdjPerHr ? `${salaryAdjPerHr}%` : ''} ${unit} ${
            isSuccess ? monthSalary : computedMonthSalary
        }/月，即${isSuccess ? (monthSalary * 16).toFixed(0) : computedYearSalary}/年`;
    };
    const isConsistent = form.getFieldValue('salaryAdjTypeHr') === '0';
    return (
        <div>
            <Item
                required={type !== 'detail'}
                style={type !== 'detail' ? { marginBottom: 0 } : {}}
                label="薪资调整确认"
            >
                {type !== 'detail' ? (
                    <Row type="flex" gutter={8}>
                        <Col className={styles.flex}>
                            <Item>
                                {getFieldDecorator('salaryAdjTypeHr', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择薪资变化类型！'
                                        }
                                    ]
                                })(
                                    <Select
                                        onChange={() => {
                                            form.setFields({
                                                salaryAdjPerHr: {
                                                    value: undefined
                                                }
                                            });
                                        }}
                                        placeholder="请选择"
                                    >
                                        {salary.types.map(item => (
                                            <Option
                                                disabled={item.value === '1' && incPer === 50}
                                                key={item.value}
                                                value={item.value}
                                            >
                                                {item.name}
                                            </Option>
                                        ))}
                                    </Select>
                                )}
                            </Item>
                        </Col>
                        <Col className={styles.flex}>
                            <Item>
                                {getFieldDecorator('salaryAdjPerHr', {
                                    rules: [
                                        {
                                            validator(_, value, callback) {
                                                if (form.getFieldValue('salaryAdjTypeHr') !== '0') {
                                                    if (
                                                        !value ||
                                                        value > 50 ||
                                                        value < 1 ||
                                                        !/^[0-9]+([.]{1}[0-9]+){0,1}$/.test(value)
                                                    ) {
                                                        return callback('输入1-50任意数');
                                                    }
                                                    return callback();
                                                }
                                                return callback();
                                            }
                                        }
                                    ]
                                })(
                                    // <Select
                                    //     disabled={form.getFieldValue('salaryAdjTypeHr') === '0'}
                                    //     placeholder={form.getFieldValue('salaryAdjTypeHr') !== '0' && '请选择'}
                                    // >
                                    //     {salary.getValues(
                                    //         form.getFieldValue('salaryAdjTypeHr') === '1' ?
                                    //             incPer : 0
                                    //     ).map(item => (
                                    //         <Option key={item} value={item}>{item}%</Option>
                                    //     ))}
                                    // </Select>
                                    <Input
                                        suffix={isConsistent ? '' : '%'}
                                        disabled={isConsistent}
                                        placeholder={form.getFieldValue('salaryAdjTypeHr') !== '0' && '输入1-50任意数'}
                                    ></Input>
                                )}
                            </Item>
                        </Col>
                        {baseMonthSalary && (
                            <Col>
                                <Button disabled>{getValue()}</Button>
                            </Col>
                        )}
                    </Row>
                ) : (
                    getAdjustLabel()
                )}
            </Item>
            {!hideSalaryTable && (
                <Form.Item label="薪资参考" wrapperCol={{ md: { span: 20 }, sm: { span: 20 } }}>
                    <SalaryRefTable postId={detail.afterPostId} companyId={detail.companyId} />
                </Form.Item>
            )}
        </div>
    );
};

HR.propTypes = {
    type: PropTypes.oneOf(['edit', 'detail']).isRequired
};

export default HR;
